<template>
  <div class="MapChart">
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import geoJson from "@/utils/geoJson";
import Chart from './chart.vue';
export default {
  data () {
    return {
      cdata: {
        // {
        //   // 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
        //   name: '武汉市',
        //   value: 10,
        //   elseData:{
        //     // 这里放置地图 tooltip 里想显示的数据
        //   }
        // },
        geoCoordMap:{
           // '武汉市': [118.11022, 24.490474, 20],
        },
        data:[
          // {name: '武汉市', value: 158}
        ]
      }
    }
  },
  components: {
    Chart,
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData(){
      geoJson.geoJson.features.forEach(element => {
        this.cdata.geoCoordMap[element.properties.name] = element.properties.center;
        this.cdata.data.push({
          name:element.properties.name,
          value: this.random(100,600)
        })
      });
    },
    // 随机数
    random(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
    }
  }
}
</script>

<style lang="scss" scoped>
  .MapChart{
    height: 100%;
    >div{
      height: 100%;
    }
  }
</style>